<template>
	<view class="container">
		<!-- 顶部 -->
		<view class="header-box">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
					<swiper-item v-for="url in detailData.imageList" :key="url">
						<img style="width: 100%; height: 100%; " :src="url" alt="" srcset="" />
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 分院详情 -->
		<view class="branch-box-content">
			<view class="branch-court" style="margin-top: 0;">
				<view class="header-title">
					<view class="left-box" style="display: flex;justify-content: space-between;width: 100%;">
						<view>{{detailData.storeName}}</view>
						<view style="font-weight: 400;font-size: 24rpx;color:#95989D" @click="moreClick">更多> </view>
					</view>
					<!-- <view class="right-box">更多 <u-icon name="arrow-right" color="#999" size="12"></u-icon></view> -->
				</view>
				<view class="btn-box">
					<!-- <view v-for='item in detailData.storeTagList' class="tag"><u-tag :text="item"></u-tag></view> -->
				</view>
				<view style="padding: 20rpx 0rpx">
					<u-rate readonly active-color="#FFD600" :count="count" v-model="detailData.score"></u-rate>
				</view>
				<view class="text-content">
					<view>
						<view style="display: flex;justify-content: space-between;margin-bottom: 10rpx;">
							<view>服务人次:{{detailData.serviceNum?detailData.serviceNum:''}}次</view>
							<view>营业时间:{{detailData.businessStartTime}} - {{detailData.businessEndTime}}</view>
						</view>
						<view style="margin-bottom: 10rpx;display: flex;justify-content: space-between;">
							<view style="margin-right: 20rpx">
								电话：{{detailData.telephoneList[0]}}
							</view>
							<view v-if='detailData.distance'> 距离：{{detailData.distance}}</view>
						</view>
						<view style="margin-bottom: 10rpx;"> 地址:{{detailData.address}} </view>

					</view>
				</view>

			</view>
		</view>
		<!-- 分院列表 -->
		<view style="padding: 0 30rpx">
			<view class="branch-court">
				<view class="header-title">
					<view class="left-box">选择科室</view>
				</view>
				<!-- <u-tabs :list="list" :is-scroll="false" :bold="true" :current="current" @click="change"></u-tabs> -->
				<view class="tabs-box">
					<view @click="tabsMethod(index)" class="tabs-item" :class="[index===current?'tabs-item-active':'']"
						v-for='(item,index) in list' :key='item.id'>
						{{item.name}}
					</view>
				</view>
				<view style="margin-top: 30rpx">
					<view>
						<!--						<u-calendar :show="timeShow" mode="single" @confirm="timeConfirm"-->
						<!--							@close="timeShow = false"></u-calendar>-->
						<view style="display: flex; align-items: center">
							<view style="margin-right: 10rpx; width: 100%" @click="timeShow = true">
								<!--<u-button type='primary' size='mini' @click="timeShow = true">选择日期</u-button> -->
								<!--<u&#45;&#45;input placeholder="请输入日期" @focus="timeShow = true" border="surround" width="100%"-->
								<!--readonly v-model="resTime"></u&#45;&#45;input>-->
								<u-scroll-list>
									<view style="display: flex; flex-wrap: nowrap">
										<view @click="dayClick(index,item)" style="flex-shrink: 0; margin-right: 20rpx"
											v-for="(item, index) in timeList" :key="index">
											<view :style="{color:colorIndex==index?'red':''}">{{ item.week }}</view>
											<view :style="{color:colorIndex==index?'red':''}">{{ item.day.slice(5) }}
											</view>
										</view>
									</view>
								</u-scroll-list>
							</view>
							<!-- <view>{{resTime}}</view> -->
						</view>
					</view>
				</view>
				<view class="doctor-list">
					<view class="doctor-item" v-for="item in doctorList" :key="item.doctorId"
						@click="doctorClick(item)">
						<view class="img-box">
							<img :src="item.image?item.image: baseURL + '/static/error.png'" alt="" />
						</view>
						<view class="text-box">
							<view style="display: flex;justify-content: space-between;">
								<view class="name-box">
									{{ item.doctorName }}
									<!-- <view>{{item.amSurplusNumber+item.pmSurplusNumber+item.ntSurplusNumber}}</view> -->
								</view>
								<view style="display: flex;font-size: 24rpx;">
									<view style="margin-right: 20rpx;">
										<u-tag size="mini" plain type="warning" v-if='item.amSurplusNumber>0'
											:text="'上午'"></u-tag>
									</view>
									<view style="margin-right: 20rpx;">
										<u-tag size="mini" plain type="primary" v-if='item.pmSurplusNumber>0'
											:text="'下午'"></u-tag>
									</view>
									<view style="margin-right: 20rpx;">
										<u-tag size="mini" plain type="success" v-if='item.ntSurplusNumber>0'
											:text="'晚上'"></u-tag>
									</view>
								</view>
							</view>
							<view class="intro-box"><text>简介：</text>
								{{ item.introduce?item.introduce:'暂无' }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		AllList,
		queryScheduleDoctor,
		storeInfo,
		queryDayData,
	} from "@/api/axios/MakeAnAppointmentCenter.js";
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				// tabIndex: 0,
				swiperList: [
					"https://cdn.uviewui.com/uview/swiper/swiper1.png",
					"https://cdn.uviewui.com/uview/swiper/swiper2.png",
					"https://cdn.uviewui.com/uview/swiper/swiper3.png",
				],
				doctorList: [],
				timeList: [{
					week: "星期一",
					day: "8-16"
				}],
				count: 5,
				value: 2,
				list: [],
				current: 0,
				timeShow: false,
				currentTime: "",
				beforeData: {},
				detailData: {},
				colorIndex: 0,
				baseURL: this.staticURL,
			};
		},
		mounted() {
			let data = new Date().toTimeString();
			console.log(data);
		},
		async onLoad(data) {
			let _this = this;
			this.beforeData = data;
			this.storeId = data.storeId
			let list = await AllList({
				params: {
					storeId: data.storeId,
					type: "dept",
				},
			});
			this.list = list;
			let timeList = await queryDayData({
				params: {
					dayNum: 14
				}
			})
			this.timeList = timeList.map(item => {
				return {
					week: item.week,
					day: item.appointDate
				}
			})
			let mapData = store.state.mapData
			let localCoordinate = ''
			if (mapData.location) {
				localCoordinate = mapData.location.lng + ',' + mapData.location.lat
			}
			console.log('localCoordinate', localCoordinate);
			this.detailData = await storeInfo({
				params: {
					deptId: data.storeId,
					localCoordinate: localCoordinate,
					mode: 'walking'
				}
			})


			// 医生列表
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth();
			let day = date.getDate();
			let ymd = year + "-" + (month + 1) + "-" + (day - 1);
			this.currentTime = this.timeList[0].day;
			let doctorList = await queryScheduleDoctor({
				params: {
					appointDate: this.currentTime,
					departmentId: list[0].sysId,
					storeId: data.storeId,
				},
			});
			this.doctorList = doctorList;
		},
		methods: {
			async dayClick(index, item) {
				this.colorIndex = index
				let doctorList = await queryScheduleDoctor({
					params: {
						appointDate: item.day,
						departmentId: this.list[this.current].sysId,
						storeId: this.storeId,
					},
				});
				this.doctorList = doctorList;
			},
			async tabsMethod(index) {
				this.current = index;
				console.log(index.index);
				this.colorIndex = 0
				let doctorList = await queryScheduleDoctor({
					params: {
						// appointDate: ymd,
						appointDate: this.timeList[0].day,
						departmentId: this.list[index].sysId,
						storeId: this.storeId,
					},
				});
				this.doctorList = doctorList;
			},
			timeConfirm(data) {
				console.log(data);
				this.resTime = data[0];
				queryScheduleDoctor({
					params: {
						appointDate: data[0],
						departmentId: this.list[0].sysId,
						storeId: this.beforeData.storeId,
					},
				}).then((res) => {
					this.doctorList = res;
					this.timeShow = false;
				});
			},
			moreClick() {
				console.log(this.beforeData);
				uni.navigateTo({
					url: "/pages-makeAnAppointmentCenter/BranchCourtMoreList/index?storeId=" + this.beforeData
						.storeId
				});
			},
			doctorClick(data) {
				uni.navigateTo({
					url: "/pages-makeAnAppointmentCenter/BranchCourtDetail/index?doctorId=" +
						data.doctorId + '&storeId=' + this.beforeData
						.storeId,
				});
			},
		},
	};
</script>
<style lang='scss'>
	@import "index.scss";
</style>